<script>
import { getCommentsApi, setCommentApi } from '@/api';
export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            content: '',
            art_id: this.$route.query.id,
            // 评论起始位置，不传标示从何第一页获取
            offset: undefined,
            // 结束标志
            end_id: 0,
            // 控制回复面板显示与隐藏
            sheetShow: false,
            // 当前点击的评论对象
            currentCom: {}
        }
    },
    methods: {
        async onLoad() {
            const res = await getCommentsApi({
                type: 'a',
                source: this.art_id,
                offset: this.offset
            })
            this.list.push(...res.data.data.results)
            // 保存下一页标志
            this.offset = res.data.data.last_id
            // 保存结束的标识
            this.end_id = res.data.data.end_id

            this.loading = false
            // 判断数据源是否加载完毕
            if (this.offset === this.end_id) {
                this.finished = true
            }
        },
        async sendCom() {
            console.log(234);
            const res = await setCommentApi({
                target: this.art_id,
                content: this.content
            })
            console.log(4556);
            this.$toast.success('发表评论成功')
            this.list.unshift(res.data.data.new_obj)
            this.content = ''
        },
        openReply(item) {
            this.sheetShow = true,
            this.currentCom = item
        }
    },
    components: {
        reply: () => import('./reply.vue')
    }
}
</script>
<template>
  <div class="comment">
    <!-- 评论列表 -->
    <van-list class="mylist" @load="onLoad" v-model="loading" :finished="finished" finished-text="没有更多了">
        <van-cell v-for="(item, index) in list" :key="index">
            <template #title>
                <div class="item">
                    <van-image width="40" height="40" fit="cover" :src="item.aut_photo" round></van-image>
                    <div class="msg">
                        <div class="name">{{item.aut_name}}</div>
                        <div class="com">{{item.content}}</div>
                        <div class="oth">
                            <span class="time">{{item.pubdate | timefromnow}}</span>
                            <van-button size="mini" @click="openReply(item)">回复（{{item.reply_count}}）</van-button>
                        </div>
                    </div>
                    <van-icon name="like-o" />
                </div>
            </template>
        </van-cell>
    </van-list>
    <!-- 评论输入框 -->
    <van-field class="myfield" v-model="content" clearable placeholder="请输入评论">
        <template #button>
            <van-button @click="sendCom" size="small" type="info">发布</van-button>
        </template>
    </van-field>
    <!-- 回复组件 -->
    <van-action-sheet v-model="sheetShow" title="发表回复">
        <!-- 相当于默认插槽 -->
        <reply v-if="sheetShow" :currentCom="currentCom"></reply>
    </van-action-sheet>
  </div>
</template>
<style lang="less">
.comment {
    .mylist {
        margin-bottom: 56px;
    }
    .item {
        display: flex;
        .msg {
            flex: 1;
            margin-left: 20px;
            .name {
                color: #4a6c9d;
            }
            .oth {
                display: flex;
                .time {
                    margin-right: 5px;
                }
            }
        }
    }
    .myfield {
        position: fixed;
        bottom: 0;
        left: 0;
    }
}
</style>